XMLHttpRequest (XHR) হলো একটি JavaScript অবজেক্ট, যা ক্লায়েন্ট (যেমন ওয়েব ব্রাউজার) থেকে সার্ভার পর্যন্ত HTTP রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়। এটি ওয়েব পেজে ডেটা লোড, আপডেট বা ডিলিট করার জন্য ব্যবহৃত হয় এবং পেজ রিফ্রেশ ছাড়াই অ্যাসিনক্রোনাসভাবে (Asynchronously) ডেটা লোড করার সুবিধা দেয়। এর মাধ্যমে আপনি বিভিন্ন রকমের HTTP মেথড (যেমন GET, POST, PUT, DELETE) ব্যবহার করে সার্ভারের সাথে যোগাযোগ করতে পারেন।
এই টিউটোরিয়ালে, XMLHttpRequest অবজেক্টের ব্যবহার এবং এর মাধ্যমে HTTP রিকোয়েস্ট পাঠানোর প্রক্রিয়া আলোচনা করা হবে।
XMLHttpRequest Object এর মৌলিক গঠন
XMLHttpRequest অবজেক্ট তৈরি করতে নিচের কোড ব্যবহার করা হয়:
var xhr = new XMLHttpRequest(); // XMLHttpRequest অবজেক্ট তৈরি করা
এই অবজেক্টের মাধ্যমে আপনি HTTP রিকোয়েস্ট পাঠাতে পারেন এবং রেসপন্স গ্রহণ করতে পারেন।
XMLHttpRequest এর মেথড
XMLHttpRequest এর কিছু গুরুত্বপূর্ণ মেথড ও প্রপার্টি রয়েছে যেগুলি HTTP রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়:
open(method, url, async): এই মেথডটি রিকোয়েস্ট সেটআপ করতে ব্যবহৃত হয়। এখানে
methodহলো HTTP মেথড (GET, POST, PUT, DELETE),urlহলো সার্ভারের URL এবংasyncহলো অ্যাসিনক্রোনাস প্রক্রিয়া চেক করা (যেখানেtrueমানে অ্যাসিনক্রোনাস এবংfalseমানে সিঙ্ক্রোনাস)।xhr.open("GET", "example.com/api/data", true);send(data): এই মেথডটি রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়। যদি আপনি
POSTবাPUTরিকোয়েস্ট পাঠান, তখনdataপ্যারামিটারটি পাঠানো ডেটা ধারণ করবে।xhr.send(); // GET রিকোয়েস্ট পাঠাতে xhr.send(JSON.stringify(data)); // POST রিকোয়েস্টে ডেটা পাঠাতেonreadystatechange: এই ইভেন্ট হ্যান্ডলারটি HTTP রিকোয়েস্টের অবস্থা পরিবর্তিত হলে কল হয়। এটি সার্ভারের রেসপন্স পাওয়ার পর কাজ করবে।
xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } };- readyState: এটি রিকোয়েস্টের বর্তমান অবস্থা নির্দেশ করে। এর মান 0 থেকে 4 পর্যন্ত হতে পারে:
- 0:
UNSENT— অবজেক্ট তৈরি হয়েছে, কিন্তুopen()মেথড এখনও কল হয়নি। - 1:
OPENED—open()মেথড কল হয়েছে, কিন্তু রিকোয়েস্ট পাঠানো হয়নি। - 2:
HEADERS_RECEIVED— রিকোয়েস্ট পাঠানো হয়েছে, এবং সার্ভার থেকে রেসপন্স হেডার পাওয়া গেছে। - 3:
LOADING— রিকোয়েস্ট প্রক্রিয়াকরণ হচ্ছে এবং সার্ভার থেকে ডেটা আসছে। - 4:
DONE— রিকোয়েস্ট সম্পূর্ণ হয়েছে এবং রেসপন্স পাওয়া গেছে।
- 0:
- status: এটি HTTP রিকোয়েস্টের রেসপন্স স্ট্যাটাস কোড নির্দেশ করে (যেমন, 200 হল "OK", 404 হল "Not Found", 500 হল "Server Error")।
XMLHttpRequest ব্যবহার করে GET রিকোয়েস্ট পাঠানো
GET রিকোয়েস্ট হল সার্ভার থেকে ডেটা রিট্রাইভ করার জন্য ব্যবহৃত HTTP মেথড।
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true); // URL সেট করা
// রিকোয়েস্ট অবস্থা পরিবর্তিত হলে কলব্যাক ফাংশন চালানো
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText); // JSON ডেটা পার্স করা
console.log(response); // কনসোলে রেসপন্স দেখানো
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
XMLHttpRequest ব্যবহার করে POST রিকোয়েস্ট পাঠানো
POST রিকোয়েস্ট হল সার্ভারে ডেটা পাঠানোর জন্য ব্যবহৃত HTTP মেথড।
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true); // URL সেট করা
xhr.setRequestHeader("Content-Type", "application/json"); // JSON টাইপ সেট করা
// রিকোয়েস্ট অবস্থা পরিবর্তিত হলে কলব্যাক ফাংশন চালানো
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 201) {
console.log(xhr.responseText); // সার্ভারের রেসপন্স দেখানো
}
};
// পাঠানো ডেটা
var data = {
title: "foo",
body: "bar",
userId: 1
};
// JSON ফরম্যাটে ডেটা পাঠানো
xhr.send(JSON.stringify(data));
XMLHttpRequest এর Response Handling
XMLHttpRequest এর মাধ্যমে সার্ভার থেকে প্রাপ্ত ডেটাকে ডিফারেন্ট ফরম্যাটে (যেমন JSON, XML, HTML) হ্যান্ডেল করা যায়। এখানে একটি JSON রেসপন্স হ্যান্ডলিংয়ের উদাহরণ দেয়া হয়েছে:
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
xhr.onload = function() {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText); // JSON পার্সিং
console.log(response); // JSON ডেটা কনসোলে দেখানো
} else {
console.log("Error: " + xhr.status);
}
};
xhr.send();
CORS (Cross-Origin Resource Sharing) এবং XMLHttpRequest
যখন আপনি অন্য ডোমেইনে Ajax রিকোয়েস্ট পাঠান, তখন CORS সমস্যা হতে পারে। CORS হেডার সঠিকভাবে সার্ভারে কনফিগার করা না হলে, ব্রাউজার আপনার রিকোয়েস্ট ব্লক করতে পারে। CORS সমাধানের জন্য সার্ভারের সঠিক হেডার সেট করতে হয়:
header("Access-Control-Allow-Origin: *");
XMLHttpRequest এর সুবিধা এবং সীমাবদ্ধতা
সুবিধাসমূহ:
- অ্যাসিনক্রোনাস রিকোয়েস্ট:
XMLHttpRequestঅ্যাসিনক্রোনাস রিকোয়েস্ট পাঠাতে সক্ষম, যা পেজ রিফ্রেশ ছাড়াই ডেটা লোড করার সুবিধা দেয়। - সহজ ব্যবহৃত: এটি একটি সহজ API যা কম্প্যাক্ট কোডে HTTP রিকোয়েস্ট পরিচালনা করতে সক্ষম।
- ডেটা ফেচিং: JSON, XML বা টেক্সট ফরম্যাটে সার্ভার থেকে ডেটা ফেচ করতে ব্যবহৃত হয়।
সীমাবদ্ধতা:
- CORS সমস্যা: ক্রস-অরিজিন রিকোয়েস্টের ক্ষেত্রে CORS সমস্যা হতে পারে।
- কমপ্লেক্স API: JSON ফরম্যাটের ডেটা প্রসেসিংয়ের জন্য JSON.parse() এবং JSON.stringify() ব্যবহার করতে হয়, যা কিছুটা কমপ্লেক্স হতে পারে।
উপসংহার
XMLHttpRequest অবজেক্টটি ওয়েব ডেভেলপমেন্টে ডেটা লোড এবং সার্ভারের সাথে যোগাযোগ করার জন্য একটি গুরুত্বপূর্ণ টুল। এটি অ্যাসিনক্রোনাস HTTP রিকোয়েস্ট পাঠানোর মাধ্যমে ওয়েব পেজের কার্যকারিতা এবং ইন্টারঅ্যাকটিভিটি উন্নত করতে সাহায্য করে। XMLHttpRequest ব্যবহার করে আপনি সার্ভারের সাথে যোগাযোগ করতে পারেন এবং ডেটা বিভিন্ন ফরম্যাটে প্রসেস করতে সক্ষম হন।
XMLHttpRequest অবজেক্ট হলো Ajax এর একটি মূল উপাদান এবং এটি JavaScript API এর একটি অংশ, যা ব্রাউজার এবং ওয়েব সার্ভারের মধ্যে ডেটা এক্সচেঞ্জ করতে ব্যবহৃত হয়। এটি Ajax রিকোয়েস্ট তৈরি ও পরিচালনার জন্য ব্যবহৃত হয়, যা ওয়েব পেজকে পেজ রিলোড ছাড়াই ডায়নামিকভাবে আপডেট করতে সক্ষম করে। নিচে XMLHttpRequest অবজেক্টের ভূমিকা এবং কাজের প্রক্রিয়া নিয়ে বিস্তারিত আলোচনা করা হলো:
XMLHttpRequest এর ভূমিকা:
১. অ্যাসিনক্রোনাস ডেটা এক্সচেঞ্জ:
XMLHttpRequestঅবজেক্ট অ্যাসিনক্রোনাস পদ্ধতিতে (Asynchronous) সার্ভারের সাথে ডেটা আদান-প্রদান করতে সক্ষম। এর ফলে, ওয়েব পেজ রিফ্রেশ না করেই পেজে নতুন ডেটা আপডেট করা যায়।- অ্যাসিনক রিকোয়েস্টের মাধ্যমে, ইউজার ইন্টারফেস (UI) প্রতিক্রিয়াশীল থাকে এবং ব্যবহারকারীরা তাদের কাজ চালিয়ে যেতে পারে, যখন সার্ভারের সাথে যোগাযোগ চলছে।
২. HTTP রিকোয়েস্ট পরিচালনা:
XMLHttpRequestঅবজেক্ট বিভিন্ন HTTP মেথড (যেমন: GET, POST, PUT, DELETE) ব্যবহার করে সার্ভারের সাথে রিকোয়েস্ট পাঠাতে পারে।GETমেথড সাধারণত ডেটা আনার জন্য ব্যবহৃত হয়, এবংPOSTমেথড ডেটা সার্ভারে পাঠানোর জন্য ব্যবহৃত হয়।
৩. সার্ভার রেসপন্স প্রসেস করা:
XMLHttpRequestঅবজেক্ট সার্ভার থেকে আসা রেসপন্স রিসিভ করতে এবং প্রসেস করতে ব্যবহৃত হয়। এটি JSON, XML, HTML বা প্লেইন টেক্সট ফরম্যাটে রেসপন্স হ্যান্ডেল করতে পারে।- JavaScript দিয়ে এই রেসপন্সকে প্রসেস করে HTML DOM আপডেট করা যায়।
৪. সিঙ্ক্রোনাস এবং অ্যাসিনক্রোনাস অপারেশন:
XMLHttpRequestঅবজেক্ট অ্যাসিনক্রোনাস রিকোয়েস্টের পাশাপাশি সিঙ্ক্রোনাস রিকোয়েস্টও (Synchronous) পরিচালনা করতে পারে। তবে সাধারণত Ajax রিকোয়েস্ট অ্যাসিনক্রোনাস পদ্ধতিতে করা হয়, কারণ এটি পেজের ইউজার এক্সপেরিয়েন্স উন্নত করে।
৫. এরর হ্যান্ডলিং:
XMLHttpRequestঅবজেক্টের মাধ্যমে রিকোয়েস্টের সময় কোনো এরর হলে, সেটি চেক করা এবং হ্যান্ডেল করা যায়। এর মাধ্যমে ডেভেলপাররা ইউজারদের সঠিক বার্তা প্রদর্শন করতে পারে বা উপযুক্ত অ্যাকশন নিতে পারে।
XMLHttpRequest অবজেক্টের কাজের ধাপ:
Ajax রিকোয়েস্ট করার জন্য XMLHttpRequest অবজেক্টের কাজের ধাপগুলো নিম্নে দেখানো হলো:
১. XMLHttpRequest অবজেক্ট তৈরি করা:
var xhr = new XMLHttpRequest();- এটি একটি
XMLHttpRequestঅবজেক্ট তৈরি করে, যা Ajax রিকোয়েস্ট পরিচালনা করবে।
২. রিকোয়েস্ট সেটআপ করা:
xhr.open("GET", "https://example.com/api/data", true);open()মেথড ব্যবহার করে HTTP মেথড (যেমন: GET/POST) এবং URL সেট করা হয়।- তৃতীয় প্যারামিটার
trueবাfalseদিয়ে অ্যাসিনক্রোনাস বা সিঙ্ক্রোনাস সেট করা হয় (এখানেtrueমানে অ্যাসিনক্রোনাস)।
৩. রিকোয়েস্ট পাঠানো:
xhr.send();
send()মেথড ব্যবহার করে রিকোয়েস্টটি সার্ভারে পাঠানো হয়। যদি এটি একটি POST রিকোয়েস্ট হয়, তবেsend()মেথডে ডেটা প্যারামিটার হিসেবে পাঠানো হয়।
৪. রেসপন্স হ্যান্ডলিং:
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// রেসপন্স ডেটা প্রসেস করা
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};onreadystatechangeইভেন্ট হ্যান্ডলার ব্যবহার করে রিকোয়েস্টের অবস্থা চেক করা হয়।readyState === 4নির্দেশ করে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে, এবংstatus === 200নির্দেশ করে যে রিকোয়েস্ট সফল হয়েছে।- রেসপন্স পাওয়ার পর, তা প্রসেস করে DOM বা UI আপডেট করা যায়।
৫. এরর হ্যান্ডলিং (বিকল্প ধাপ):
onerrorইভেন্ট ব্যবহার করে, যদি রিকোয়েস্টের সময় কোনো সমস্যা হয়, তা হ্যান্ডেল করা যায় এবং উপযুক্ত বার্তা দেখানো যায়।
XMLHttpRequest এর উদাহরণ:
function fetchData() {
var xhr = new XMLHttpRequest(); // XMLHttpRequest অবজেক্ট তৈরি করা
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); // রিকোয়েস্ট সেটআপ করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
}
};
xhr.send(); // রিকোয়েস্ট পাঠানো
}
- এখানে
fetchData()ফাংশন একটি Ajax রিকোয়েস্ট পাঠায় এবং সার্ভার থেকে JSON ডেটা এনে তা HTML ডিভে ইনজেক্ট করে।
সারসংক্ষেপ:
- মূল কাজ:
XMLHttpRequestঅবজেক্ট Ajax রিকোয়েস্ট তৈরি, পরিচালনা এবং সার্ভারের রেসপন্স হ্যান্ডেল করতে ব্যবহৃত হয়। - HTTP রিকোয়েস্ট: GET, POST, PUT, DELETE মেথডের মাধ্যমে ডেটা আদান-প্রদান করা যায়।
- রেসপন্স হ্যান্ডলিং: সার্ভার থেকে রেসপন্স পাওয়ার পর, তা প্রসেস করে DOM বা UI আপডেট করা যায়।
- এরর ম্যানেজমেন্ট: Ajax রিকোয়েস্ট চলাকালীন কোনো সমস্যা হলে তা হ্যান্ডেল করা যায়।
XMLHttpRequest অবজেক্ট Ajax এর একটি গুরুত্বপূর্ণ উপাদান যা ওয়েব পেজকে ডায়নামিক, ইন্টারেক্টিভ এবং রেসপন্সিভ করতে ব্যবহৃত হয়।
XMLHttpRequest অবজেক্টের দুটি গুরুত্বপূর্ণ মেথড হলো open() এবং send()। এই মেথডগুলো Ajax রিকোয়েস্ট তৈরি এবং সার্ভারের সাথে ডেটা এক্সচেঞ্জ করার প্রক্রিয়ায় প্রধান ভূমিকা পালন করে। নিচে open() এবং send() মেথডের বিস্তারিত আলোচনা করা হলো:
১. open() মেথড
ভূমিকা:
open()মেথডXMLHttpRequestঅবজেক্টে HTTP রিকোয়েস্ট সেটআপ করার জন্য ব্যবহৃত হয়। এটি রিকোয়েস্টের ধরন (যেমন GET বা POST), URL এবং অ্যাসিনক্রোনাস বা সিঙ্ক্রোনাসভাবে রিকোয়েস্টটি কাজ করবে কিনা, তা নির্ধারণ করে।
Syntax:
xhr.open(method, url, async);
প্যারামিটারসমূহ:
১. method: এটি রিকোয়েস্টের HTTP মেথড নির্দেশ করে। সাধারণ মেথডগুলো হলো:
"GET": ডেটা আনার জন্য।"POST": ডেটা সার্ভারে পাঠানোর জন্য।
২. url: সার্ভারের URL যেখান থেকে ডেটা ফেচ করা হবে বা যেখানে ডেটা পাঠানো হবে। এটি হতে পারে একটি API বা JSON ফাইলের লিঙ্ক।
৩. async: এটি একটি বুলিয়ান প্যারামিটার যা নির্ধারণ করে রিকোয়েস্টটি অ্যাসিনক্রোনাস (true) নাকি সিঙ্ক্রোনাস (false) হবে।
true: অ্যাসিনক্রোনাস রিকোয়েস্ট (প্রায় সব ক্ষেত্রে ব্যবহার করা হয়)।false: সিঙ্ক্রোনাস রিকোয়েস্ট (প্রায় কখনোই ব্যবহার করা হয় না, কারণ এটি পেজ ফ্রিজ করে দিতে পারে)।
উদাহরণ:
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data", true);
বিস্তারিত:
"GET"মেথড ব্যবহার করে ডেটা ফেচ করার জন্য রিকোয়েস্ট সেট করা হয়েছে।"https://example.com/api/data"URL থেকে ডেটা ফেচ করা হবে।trueমানে রিকোয়েস্টটি অ্যাসিনক্রোনাসভাবে চলবে, অর্থাৎ পেজ রিলোড বা ফ্রিজ না করেই রিকোয়েস্ট প্রসেস হবে।
২. send() মেথড
ভূমিকা:
send()মেথডXMLHttpRequestঅবজেক্ট ব্যবহার করে সার্ভারে রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়। এটিopen()মেথড কল করার পর ব্যবহার করা হয় এবং এটি সার্ভারের সাথে রিকোয়েস্ট শুরু করে।
Syntax:
xhr.send(body);
প্যারামিটারসমূহ:
body: এটি ঐচ্ছিক এবং সাধারণত POST রিকোয়েস্টের জন্য ব্যবহৃত হয়। এটি সার্ভারে পাঠানোর ডেটা ধারণ করে।- GET রিকোয়েস্টের জন্য
send()মেথডে কোনো প্যারামিটার লাগবে না। - POST রিকোয়েস্টের জন্য JSON, ফর্ম ডেটা বা টেক্সট হিসেবে ডেটা পাঠানো যায়।
- GET রিকোয়েস্টের জন্য
উদাহরণ:
GET রিকোয়েস্টের জন্য:
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data", true);
xhr.send();- এখানে
send()মেথড কোনো প্যারামিটার ছাড়াই কল করা হয়েছে, কারণ এটি একটি GET রিকোয়েস্ট।
POST রিকোয়েস্টের জন্য:
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/api/data", true);
xhr.setRequestHeader("Content-Type", "application/json");
var data = JSON.stringify({ name: "John", age: 30 });
xhr.send(data);
এখানে send(data) মেথডে JSON ডেটা প্যারামিটার হিসেবে পাঠানো হয়েছে, যা সার্ভারে সাবমিট হবে।
open() এবং send() এর সংক্ষিপ্ত ব্যবহারের ধাপ:
open(): প্রথমে, এটি রিকোয়েস্ট টাইপ, URL, এবং অ্যাসিনক্রোনাস বা সিঙ্ক্রোনাস সেট করে।send(): তারপর, এটি রিকোয়েস্টটি সার্ভারে পাঠায়।
সম্পূর্ণ উদাহরণ:
function fetchData() {
var xhr = new XMLHttpRequest(); // XMLHttpRequest অবজেক্ট তৈরি করা
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); // রিকোয়েস্ট ওপেন করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
console.log(data);
}
};
xhr.send(); // রিকোয়েস্ট পাঠানো
}
open()মেথডের মাধ্যমে রিকোয়েস্ট সেটআপ করা হয়েছে এবংsend()মেথডের মাধ্যমে রিকোয়েস্টটি সার্ভারে পাঠানো হয়েছে।- রেসপন্স পাওয়ার পর
onreadystatechangeইভেন্ট হ্যান্ডলার ব্যবহার করে তা প্রসেস করা হয়েছে।
সারসংক্ষেপ:
open(): রিকোয়েস্ট সেটআপ করার জন্য ব্যবহৃত হয় (HTTP মেথড, URL, এবং অ্যাসিনক্রোনাস বা সিঙ্ক্রোনাস নির্ধারণ)।send(): রিকোয়েস্টটি সার্ভারে পাঠানোর জন্য ব্যবহৃত হয়।
open() এবং send() মেথড একসাথে ব্যবহার করে Ajax রিকোয়েস্ট তৈরি এবং পরিচালনা করা হয়, যা ওয়েব পেজকে ডায়নামিকভাবে আপডেট করতে এবং ইউজার ইন্টারফেসে ডেটা প্রসেস করতে সহায়ক।
Ajax এর মাধ্যমে Request এবং Response Handling হলো ওয়েব সার্ভার এবং ক্লায়েন্ট (ব্রাউজার) এর মধ্যে ডেটা আদান-প্রদানের একটি প্রক্রিয়া। Ajax রিকোয়েস্টের মাধ্যমে সার্ভারে তথ্য পাঠানো হয় এবং সার্ভার থেকে প্রাপ্ত রেসপন্স ডেটা প্রসেস করা হয়। XMLHttpRequest অবজেক্ট ব্যবহার করে এই প্রক্রিয়াটি সম্পন্ন করা হয়। নিচে Request এবং Response Handling এর বিস্তারিত আলোচনা এবং উদাহরণ তুলে ধরা হলো।
Request Handling:
Request Handling হলো সেই প্রক্রিয়া, যেখানে একটি Ajax রিকোয়েস্ট সার্ভারে পাঠানো হয় এবং এই রিকোয়েস্টটি কীভাবে সেটআপ এবং পরিচালনা করা হয়।
ধাপগুলো:
১. XMLHttpRequest অবজেক্ট তৈরি করা:
- JavaScript এর মাধ্যমে একটি
XMLHttpRequestঅবজেক্ট তৈরি করা হয়, যা Ajax রিকোয়েস্ট পরিচালনা করবে।
var xhr = new XMLHttpRequest();২. রিকোয়েস্ট ওপেন করা:
open()মেথড ব্যবহার করে HTTP মেথড (যেমন GET বা POST), সার্ভারের URL এবং অ্যাসিনক্রোনাস বা সিঙ্ক্রোনাস সেট করা হয়।
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);৩. রিকোয়েস্ট হেডার সেট করা (ঐচ্ছিক):
- যদি POST রিকোয়েস্ট হয়, তবে
setRequestHeader()মেথড ব্যবহার করে কনটেন্ট টাইপ বা অন্যান্য হেডার সেট করা হয়।
xhr.setRequestHeader("Content-Type", "application/json");৪. রিকোয়েস্ট পাঠানো:
send()মেথড ব্যবহার করে রিকোয়েস্টটি সার্ভারে পাঠানো হয়।
xhr.send();- POST রিকোয়েস্টের ক্ষেত্রে ডেটা প্যারামিটার হিসেবে
send()এ পাঠানো হয়।
Response Handling:
Response Handling হলো সেই প্রক্রিয়া, যেখানে সার্ভার থেকে প্রাপ্ত রেসপন্স ডেটা প্রসেস করা হয় এবং UI বা HTML DOM আপডেট করা হয়।
ধাপগুলো:
১. onreadystatechange ইভেন্ট হ্যান্ডলার সেট করা:
- রিকোয়েস্টের অবস্থা পরিবর্তন হলে
onreadystatechangeইভেন্ট হ্যান্ডলার ট্রিগার হয়।
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
// রেসপন্স প্রসেস করা
}
};
readyStateএবংstatusব্যবহার করে চেক করা হয় যে রিকোয়েস্ট সম্পূর্ণ এবং সফল হয়েছে কিনা।readyState === 4নির্দেশ করে রিকোয়েস্ট সম্পূর্ণ।status === 200নির্দেশ করে রিকোয়েস্ট সফল।
২. রেসপন্স ডেটা প্রসেস করা:
- যদি রিকোয়েস্ট সফল হয়, তবে
responseTextবাresponseXMLব্যবহার করে ডেটা রিসিভ করা হয় এবং প্রসেস করা হয়।
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
responseTextব্যবহার করে প্লেইন টেক্সট বা JSON ডেটা রিসিভ করা যায়।- যদি XML ফরম্যাটের ডেটা আসে, তবে
responseXMLব্যবহার করা হয়।
৩. HTML DOM আপডেট করা:
- প্রাপ্ত ডেটা ব্যবহার করে HTML DOM এ পরিবর্তন আনা হয়, যেমন নতুন কন্টেন্ট যোগ করা বা বিদ্যমান কন্টেন্ট আপডেট করা।
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
এরর হ্যান্ডলিং:
- যদি রিকোয়েস্ট ব্যর্থ হয় (যেমন
status২০০ না হয়), তবে একটি এরর মেসেজ বা লজিক্যাল এক্সেপশন হ্যান্ডল করা হয়।
if (xhr.readyState === 4 && xhr.status !== 200) {
console.error("Request failed with status: " + xhr.status);
}
সম্পূর্ণ উদাহরণ: Request এবং Response Handling
function fetchData() {
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// রিকোয়েস্ট ওপেন করা (GET মেথড, URL এবং অ্যাসিনক)
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ
if (xhr.status === 200) { // রিকোয়েস্ট সফল
var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
} else {
// এরর হ্যান্ডলিং
document.getElementById("data-container").innerHTML = "Error loading data!";
}
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
}
এই উদাহরণে কী হচ্ছে:
- রিকোয়েস্ট পাঠানো:
fetchData()ফাংশন কল করলে একটি GET রিকোয়েস্ট তৈরি হয় এবংhttps://jsonplaceholder.typicode.com/posts/1থেকে ডেটা ফেচ করা হয়।
- রেসপন্স হ্যান্ডলিং:
- রিকোয়েস্ট সফল হলে (status 200), JSON ডেটা প্রসেস করা হয় এবং HTML পেজে ইনজেক্ট করা হয়।
- যদি কোনো এরর হয়, তবে একটি এরর মেসেজ দেখানো হয়।
সারসংক্ষেপ:
- Request Handling: Ajax রিকোয়েস্ট সেটআপ ও সার্ভারে পাঠানোর প্রক্রিয়া।
- Response Handling: সার্ভার থেকে প্রাপ্ত ডেটা প্রসেস ও HTML আপডেট করার প্রক্রিয়া।
এই ধাপগুলোর মাধ্যমে Ajax এর Request এবং Response Handling সম্পন্ন করা হয়, যা ওয়েব পেজকে ডায়নামিক এবং ইন্টারেক্টিভ করে তোলে।
readyState এবং status হলো XMLHttpRequest অবজেক্টের দুটি গুরুত্বপূর্ণ প্রপার্টি, যা Ajax রিকোয়েস্টের অবস্থান এবং সার্ভারের রেসপন্স চেক করতে ব্যবহৃত হয়। এগুলোর মাধ্যমে আমরা জানতে পারি যে রিকোয়েস্টটি সম্পূর্ণ হয়েছে কিনা এবং সফল হয়েছে কিনা। এই প্রপার্টিগুলোর মাধ্যমে রেসপন্স ম্যানেজমেন্ট করা হয়। নিচে readyState এবং status এর বিস্তারিত ব্যাখ্যা এবং কিভাবে এগুলো ব্যবহার করে রেসপন্স ম্যানেজ করা হয়, তা নিয়ে আলোচনা করা হলো।
১. readyState:
readyState প্রপার্টি রিকোয়েস্টের বর্তমান অবস্থান নির্দেশ করে। এটি XMLHttpRequest এর একটি বিল্ট-ইন প্রপার্টি, যার ভ্যালু ০ থেকে ৪ পর্যন্ত হতে পারে। প্রতিটি ভ্যালু একটি নির্দিষ্ট অবস্থার নির্দেশ করে।
readyState এর ভ্যালুগুলো:
| ভ্যালু | অবস্থা | বর্ণনা |
|---|---|---|
| 0 | UNSENT | রিকোয়েস্টটি তৈরি হয়েছে কিন্তু এখনও ওপেন করা হয়নি। |
| 1 | OPENED | open() মেথড কল করা হয়েছে, কিন্তু send() এখনও কল করা হয়নি। |
| 2 | HEADERS_RECEIVED | রিকোয়েস্ট পাঠানো হয়েছে, এবং সার্ভার থেকে হেডার রিসিভ করা হয়েছে। |
| 3 | LOADING | রিকোয়েস্ট প্রসেসিং চলছে এবং সার্ভার থেকে কিছু রেসপন্স আসছে। |
| 4 | DONE | রিকোয়েস্ট সম্পূর্ণ হয়েছে এবং সার্ভার থেকে পুরো রেসপন্স পাওয়া গেছে। |
- ব্যবহার: আমরা সাধারণত
readyState === 4চেক করি, যা নির্দেশ করে রিকোয়েস্ট সম্পূর্ণ হয়েছে।
২. status:
status প্রপার্টি HTTP স্ট্যাটাস কোড নির্দেশ করে, যা সার্ভার থেকে রেসপন্স হিসেবে আসে। এটি XMLHttpRequest এর একটি প্রপার্টি, যা রিকোয়েস্টের সফলতা বা ব্যর্থতা যাচাই করতে ব্যবহৃত হয়।
সাধারণ HTTP Status Codes:
| স্ট্যাটাস কোড | অর্থ | বর্ণনা |
|---|---|---|
| 200 | OK | রিকোয়েস্ট সফল হয়েছে এবং সার্ভার থেকে সঠিক রেসপন্স এসেছে। |
| 404 | Not Found | রিকোয়েস্ট করা রিসোর্সটি সার্ভারে পাওয়া যায়নি। |
| 500 | Internal Server Error | সার্ভারে কোনো সমস্যা হয়েছে। |
- ব্যবহার: আমরা সাধারণত
status === 200চেক করি, যা নির্দেশ করে রিকোয়েস্ট সফল হয়েছে।
readyState এবং status এর মাধ্যমে Response Management
readyState এবং status একসাথে ব্যবহার করে আমরা রিকোয়েস্টের সফলতা বা ব্যর্থতা চেক করতে পারি এবং তার উপর ভিত্তি করে উপযুক্ত এক্সেকিউশন করতে পারি।
উদাহরণ:
function fetchData() {
var xhr = new XMLHttpRequest(); // XMLHttpRequest অবজেক্ট তৈরি করা
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); // রিকোয়েস্ট ওপেন করা
// রেসপন্স ম্যানেজমেন্টের জন্য onreadystatechange ইভেন্ট হ্যান্ডলার সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা তা চেক করা
if (xhr.status === 200) { // রিকোয়েস্ট সফল হয়েছে কিনা তা চেক করা
var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
} else {
// যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে এরর মেসেজ দেখানো
document.getElementById("data-container").innerHTML = "Error fetching data. Status code: " + xhr.status;
}
}
};
xhr.send(); // রিকোয়েস্ট পাঠানো
}
ব্যাখ্যা:
readyStateচেক করা:xhr.onreadystatechangeইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যেxhr.readyState === 4কিনা। এটি নির্দেশ করে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে এবং সার্ভার থেকে পুরো রেসপন্স পাওয়া গেছে।
statusচেক করা:- যদি
xhr.readyState === 4হয়, তাহলেxhr.status === 200চেক করা হয়েছে, যা নির্দেশ করে যে রিকোয়েস্ট সফল এবং সার্ভার থেকে সঠিক রেসপন্স এসেছে। - যদি
status === 200না হয়, তাহলে একটি এরর মেসেজ দেখানো হয়েছে এবং স্ট্যাটাস কোড প্রদর্শন করা হয়েছে।
- যদি
readyState এবং status এর মাধ্যমে Response Handling এর ধাপ:
readyState === 4চেক করা:- রিকোয়েস্ট সম্পূর্ণ হলে নিশ্চিত হওয়া যায় যে সার্ভার থেকে পুরো রেসপন্স পাওয়া গেছে।
status === 200চেক করা:- সফল রিকোয়েস্ট হলে ডেটা প্রসেস করা হয় এবং HTML DOM আপডেট করা হয়।
- এরর ম্যানেজমেন্ট:
- যদি
status !== 200হয়, তাহলে একটি এরর মেসেজ প্রদর্শন করা হয় যা ইউজারকে জানায় যে রিকোয়েস্ট ব্যর্থ হয়েছে।
- যদি
সারসংক্ষেপ:
readyState: রিকোয়েস্টের অবস্থা নির্দেশ করে (0 থেকে 4 পর্যন্ত)। আমরা সাধারণতreadyState === 4চেক করি।status: সার্ভারের রেসপন্সের সফলতা নির্দেশ করে (HTTP স্ট্যাটাস কোড, যেমন 200)। আমরা সাধারণতstatus === 200চেক করি।
readyState এবং status একসাথে ব্যবহার করে Ajax রিকোয়েস্টের রেসপন্স ম্যানেজ করা হয়, যা ওয়েব অ্যাপ্লিকেশনকে ডায়নামিক এবং ইন্টারেক্টিভ করতে সাহায্য করে।
Read more
